<div [@routerTransition]>
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>月度成本</span>
                </h3>
                <span style="display: inline-block; width: 280px;">
                    <span style="margin-left:10px;">选择时间：</span>
                    <div style="width:120px;display:inline-block;">
                        <p-calendar
                            [(ngModel)]="selectedDate"
                            view="month"
                            dateFormat="yy-mm"
                            [yearNavigator]="true"
                            yearRange="2000:2030"
                            [locale]="calendarHelper.cn"
                            (onSelect)="dateChange()"
                        ></p-calendar>
                    </div>
                </span>
                <div style="display: inline-block; width: 250px;">
                    <span style="margin-left:10px;">车间：</span>
                    <div style="width:120px;display:inline-block;">
                        <select
                            #workShopCombobox
                            name="workShopname"
                            class="form-control"
                            [(ngModel)]="workShop"
                            (change)="workShopChange()"
                        >
                            <option *ngFor="let workShopCombobox of workShopComboboxs" [value]="workShopCombobox.value"
                                >{{ workShopCombobox.displayText }}
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 text-right"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="row align-items-center">
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table
                            #dataTable
                            (onLazyLoad)="getMonthlyCosts($event)"
                            [value]="primengTableHelper.records"
                            rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                            [paginator]="false"
                            [lazy]="true"
                            [scrollable]="true"
                            ScrollWidth="100%"
                            [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns"
                        >
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 150px">
                                        条码号
                                    </th>
                                    <th style="width: 150px">
                                        成本
                                    </th>
                                    <th style="width: 130px">
                                        操作
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 150px">
                                        {{ record.batchId }}
                                    </td>
                                    <td style="width: 150px">
                                        {{ record.amount }}
                                    </td>
                                    <th style="width: 130px">
                                        <button
                                            type="button"
                                            class="btn btn-primary"
                                            (click)="typeCostDetailModal.show(record.amount, record.typeCosts)"
                                        >
                                            类型成本
                                        </button>
                                        <button
                                            type="button"
                                            class="btn btn-primary"
                                            (click)="realtimeCostDetailModal.show(record.batchId, selectedDate)"
                                        >
                                            详细数据
                                        </button>
                                    </th>
                                </tr>
                            </ng-template>
                        </p-table>
                        <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                            {{ "NoData" | localize }}
                        </div>
                        <div class="primeng-paging-container">
                            <p-paginator
                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                #paginator
                                (onPageChange)="getMonthlyCosts($event)"
                                [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                            >
                            </p-paginator>
                            <span class="total-records-count">
                                {{ "TotalRecordsCount" | localize: primengTableHelper.totalRecordsCount }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <typeCostDetailModal #typeCostDetailModal></typeCostDetailModal>

    <realtimeCostDetailModal #realtimeCostDetailModal></realtimeCostDetailModal>
</div>
